import React from 'react'
import { Card } from 'components/Base'
import Graph from './Graph'
import Gateway from './GateWay'
import PieCard from './PieCard'
import ProjectStatus from './ProjectStatus'
import style from './index.scss'

const ProEnv = props => {
  const [cpu, setCpu] = React.useState({ used: 0, total: 0 })
  const [mem, setMem] = React.useState({ used: 0, total: 0 })

  React.useEffect(() => {
    request
      .get(
        '/kapis/clusters/host/resources.kubesphere.io/v1alpha2/namespaces/project/quotas'
      )
      .then(res => {
        console.log(res.data)
        const { hard, used } = res.data
        const cpuInfo = {
          used: parseInt(used['requests.cpu'], 10) || 0,
          total: parseInt(hard['requests.cpu'], 10) * 1024 || 0,
        }
        const memInfo = {
          used: parseInt(used['requests.memory'], 10),
          total: parseInt(hard['requests.memory'], 10) * 1024 || 0,
        }
        setCpu(cpuInfo)
        setMem(memInfo)
      })
  }, [])

  return (
    <div className={style.content}>
      <div className={style.left}>
        <Card className={'card'} title={'内存/CPU使用情况'}>
          <PieCard title={'ROM(M)'} used={cpu.used} total={cpu.total} />
          <PieCard title={'存储(M)'} used={mem.used} total={mem.total} />
        </Card>
        <Card className={'card'} title={'项目网关情况'}>
          <Gateway />
        </Card>
      </div>
      <div className={style.middle}>
        <Card className={'card'} title={'服务拓扑'}>
          <Graph {...props} />
        </Card>
      </div>
      <div className={style.right}>
        <Card className={'card'} title={'服务列表'}>
          <ProjectStatus />
          {/* <Table
            hideHeader
            hideFooter
            rowKey="name"
            data={[
              {
                name: '考试系统',
                des: '负责系统学习成绩考核使用熟练度',
                client: 222,
                runTime: 200,
                cpu: 11,
                memory: 1620,
              },
              {
                name: '考试系统1',
                des: '负责系统学习成绩考核使用熟练度',
                client: 222,
                runTime: 200,
                cpu: 11,
                memory: 1620,
              },
              {
                name: '考试系统2',
                des: '负责系统学习成绩考核使用熟练度',
                client: 222,
                runTime: 200,
                cpu: 11,
                memory: 1620,
              },
              {
                name: '考试系统3',
                des: '负责系统学习成绩考核使用熟练度',
                client: 222,
                runTime: 200,
                cpu: 11,
                memory: 1620,
              },
            ]}
            loading={false}
            columns={[
              {
                title: '服务名称',
                dataIndex: 'name',
                render: v => {
                  return (
                    <>
                      <img
                        style={{
                          width: '30px',
                          height: '30px',
                          marginRight: '10px',
                        }}
                        src="/assets/new/row.png"
                      />
                      <span
                        style={{ lineHeight: '30px', verticalAlign: 'top' }}
                      >
                        {v}
                      </span>
                    </>
                  )
                },
              },
              // {
              //   title: '服务描述',
              //   dataIndex: 'des',
              // },
              {
                title: '实例数',
                dataIndex: 'client',
              },
              {
                title: '运行时间(h)',
                dataIndex: 'runTime',
              },
              {
                title: 'CPU',
                dataIndex: 'cpu',
              },
              {
                title: '内存(GB)',
                dataIndex: 'memory',
              },
            ]}
          /> */}
        </Card>
      </div>
    </div>
  )
}

export default ProEnv
